<template>
    <div>
      <Card :stus="stus"></Card>
      <Add @addMember="addMember"></Add>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  import Card from './components/Card.vue'
  import Add from './components/Add.vue'
  
  export default {
    name: 'Report',
    components: { Card, Add },
    setup() {
      const stus = ref([
        { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 }, avatar: require('@/assets/img/avatar' + Math.floor(Math.random() * 10) + '.png') },
        { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 46, yy: 74 }, avatar: require('@/assets/img/avatar' + Math.floor(Math.random() * 10) + '.png') },
        { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 }, avatar: require('@/assets/img/avatar' + Math.floor(Math.random() * 10) + '.png') }
      ]);
  
      const addMember = (newMember) => {
        stus.value.push(newMember);
      };
  
      return {
        stus,
        addMember
      };
    }
  }
  </script>
  
  
  <style scoped>
  .addBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 80px;
  }
  
  .icon {
    height: 25px;
  }
  </style>
  